<template>
  <div class="currentDayLive">
    <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" width="100%">
      <div class="app-container">
        <el-row>
          <el-col :span="24">
            <div class="dateRange">
              <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane v-for="(item, index) in tabsArr" :key="index" :label="item.name"
                  :name="item.val"></el-tab-pane>
              </el-tabs>
              <!-- 白班数据 -->
              <div class="day-shift" v-if="activeName === '1'">
                <div class="day-shift-left">
                  <p class="num-wei">1列位</p>
                  <div class="top-box">
                    <div class="left-title">检1</div>
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in trainFiveList" :key="index"
                        @click="handleTrainList(item, 1)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg">
                    <div class="left-title">检2</div>
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in trainSixList" :key="index"
                        @click="handleTrainList(item, 1)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg2">
                    <div class="left-title">检3</div>
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in trainSevenList" :key="index"
                        @click="handleTrainList(item, 1)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg2">
                    <div class="left-title">检4</div>
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in trainEightList" :key="index"
                        @click="handleTrainList(item, 1)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>

                  <div class="left-bg2">
                    <div class="left-title">检5</div>
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in trainFives" :key="index"
                        @click="handleTrainList(item, 1)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg2">
                    <div class="left-title">检6</div>
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in trainSixs" :key="index"
                        @click="handleTrainList(item, 1)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg2">
                    <div class="left-title">检7</div>
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in trainSevens" :key="index"
                        @click="handleTrainList(item, 1)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg2">
                    <div class="left-title">检8</div>
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in trainEights" :key="index"
                        @click="handleTrainList(item, 1)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="day-shift-right">
                  <p class="num-wei">2列位</p>
                  <div class="top-box">
                    <!-- <div class="left-title">检1</div> -->
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in trainList" :key="index"
                        @click="handleTrainList(item, 2)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg">
                    <!-- <div class="left-title">检2</div> -->
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in trainTwoList" :key="index"
                        @click="handleTrainList(item, 2)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg2">
                    <!-- <div class="left-title">检3</div> -->
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in trainThreeList" :key="index"
                        @click="handleTrainList(item, 2)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg2">
                    <!-- <div class="left-title">检4</div> -->
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in trainFourList" :key="index"
                        @click="handleTrainList(item, 2)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>

                  <div class="left-bg2">
                    <!-- <div class="left-title">检4</div> -->
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in trainFiveLists" :key="index"
                        @click="handleTrainList(item, 2)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg2">
                    <!-- <div class="left-title">检4</div> -->
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in trainSixLists" :key="index"
                        @click="handleTrainList(item, 2)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg2">
                    <!-- <div class="left-title">检4</div> -->
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in trainSevenLists" :key="index"
                        @click="handleTrainList(item, 2)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg2">
                    <!-- <div class="left-title">检4</div> -->
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in trainEightLists" :key="index"
                        @click="handleTrainList(item, 2)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 夜班数据 -->
              <div class="day-shift" v-else>
                <div class="day-shift-left">
                  <p class="num-wei">1列位</p>
                  <div class="top-box">
                    <div class="left-title">检1</div>
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in nightTrainFiveList" :key="index"
                        @click="handleTrainList(item, 1)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg">
                    <div class="left-title">检2</div>
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in nightTrainSixList" :key="index"
                        @click="handleTrainList(item, 1)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg2">
                    <div class="left-title">检3</div>
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in nightTrainSevenList" :key="index"
                        @click="handleTrainList(item, 1)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg2">
                    <div class="left-title">检4</div>
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in nightTrainEightList" :key="index"
                        @click="handleTrainList(item, 1)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>

                  <div class="left-bg2">
                    <div class="left-title">检5</div>
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in nightTrain1" :key="index"
                        @click="handleTrainList(item, 1)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg2">
                    <div class="left-title">检6</div>
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in nightTrain2" :key="index"
                        @click="handleTrainList(item, 1)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg2">
                    <div class="left-title">检7</div>
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in nightTrain3" :key="index"
                        @click="handleTrainList(item, 1)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg2">
                    <div class="left-title">检8</div>
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in nightTrain4" :key="index"
                        @click="handleTrainList(item, 1)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="day-shift-right">
                  <p class="num-wei">2列位</p>
                  <div class="top-box">
                    <!-- <div class="left-title">检1</div> -->
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in nightTrainList" :key="index"
                        @click="handleTrainList(item, 2)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg">
                    <!-- <div class="left-title">检2</div> -->
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in nightTrainTwoList" :key="index"
                        @click="handleTrainList(item, 2)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg2">
                    <!-- <div class="left-title">检3</div> -->
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in nightTrainThreeList" :key="index"
                        @click="handleTrainList(item, 2)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg2">
                    <!-- <div class="left-title">检4</div> -->
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in nightTrainFourList" :key="index"
                        @click="handleTrainList(item, 2)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg2">
                    <!-- <div class="left-title">检4</div> -->
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in nightFiveLists" :key="index"
                        @click="handleTrainList(item, 2)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg2">
                    <!-- <div class="left-title">检4</div> -->
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in nightSixLists" :key="index"
                        @click="handleTrainList(item, 2)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg2">
                    <!-- <div class="left-title">检4</div> -->
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in nightSevenLists" :key="index"
                        @click="handleTrainList(item, 2)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="left-bg2">
                    <!-- <div class="left-title">检4</div> -->
                    <div class="train-box">
                      <div class="train-bg" v-for="(item, index) in nightEightLists" :key="index"
                        @click="handleTrainList(item, 2)">
                        <p class="number-of-sets">第{{ index + 1 }}台</p>
                        <img v-if="item.carCode !== '' && item.carCode !== '无车'" class="istrainimg"
                          src="../../../assets/images/istrainTwo.png" width="245" height="20" alt="" />
                        <img v-if="item.carCode === '无车' || item.carCode === ''" class="istrainimg"
                          src="../../../assets/images/notrainTwo.png" width="245" height="20" alt="" />
                        <p v-if="item.carCode !== ''" class="trainNo">
                          {{ item.carCode }}
                        </p>
                        <p v-else class="trainNoTwo"></p>
                        <p :class="item.state === '0'
                          ? 'train-time'
                          : item.state === '1'
                            ? 'train-time2'
                            : item.state === '2'
                              ? 'train-time3'
                              : 'train-time4'
                          ">
                          {{ item.duration }}
                        </p>
                        <img v-if="item.state === '0'" class="is-complete-img"
                          src="../../../assets/images/iscomplete1.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '1'" class="is-complete-img"
                          src="../../../assets/images/iscomplete2.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '2'" class="is-complete-img"
                          src="../../../assets/images/iscomplete3.png" width="180" height="19" alt="" />
                        <img v-if="item.state === '3'" class="is-complete-img"
                          src="../../../assets/images/iscomplete4.png" width="180" height="19" alt="" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
    <!-- 白班列车弹框 -->
    <el-dialog :append-to-body="true" :visible.sync="dayShiftDiaVis" width="90%">
      <div class="day-box">
        <span class="carNum">车号：{{ isCarCode }}</span>
        <el-tabs v-model="activeCarName" type="card" @tab-click="handleCarClick" class="cars">
          <el-tab-pane name="1"> </el-tab-pane>
          <el-tab-pane name="2"> </el-tab-pane>
          <el-tab-pane name="3"> </el-tab-pane>
        </el-tabs>
        <div style="height: 70vh; overflow-y: scroll">
          <el-table :data="tableData" :row-class-name="tableClass">
            <el-table-column prop="workTeamName" align="center" label="检修班组" min-width="180"></el-table-column>
            <el-table-column prop="startTime" align="center" label="开始时间" min-width="250"></el-table-column>
            <el-table-column label="插号志人员" align="center" prop="insertPersonName" min-width="180"
              show-overflow-tooltip="">
            </el-table-column>
            <el-table-column prop="duration" align="center" label="时长" min-width="180"></el-table-column>
            <el-table-column prop="endTime" align="center" label="结束时间" min-width="250"></el-table-column>
            <el-table-column label="撤号志人员" align="center" prop="removePersonName" min-width="180"
              show-overflow-tooltip="">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>

    <!-- 无车弹框 -->
    <el-dialog :append-to-body="true" :visible.sync="nocarsDiaVis" width="90%">
      <div class="nocar-box">
        <span class="carNum">车号：{{ isCarCode }}</span>
        <el-tabs v-model="activeNoCar" type="card" @tab-click="handleNoCar" class="nocars">
          <el-tab-pane name="1">
            <div style="height: 70vh; overflow-y: scroll">
              <el-table :data="tableData4" :row-class-name="tableClass" style="width: 100%">
                <el-table-column prop="workTeamName" align="center" label="检修班组" min-width="180"></el-table-column>
                <el-table-column prop="startTime" align="center" label="开始时间" min-width="250"></el-table-column>
                <el-table-column label="插号志人员" align="center" prop="insertPersonName" min-width="180"
                  show-overflow-tooltip="">
                </el-table-column>
                <el-table-column prop="duration" align="center" label="时长" min-width="180"></el-table-column>
                <el-table-column prop="endTime" align="center" label="结束时间" min-width="250"></el-table-column>
                <el-table-column label="撤号志人员" align="center" prop="removePersonName" min-width="180"
                  show-overflow-tooltip="">
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import { screenList, listByCars } from "@/api/daping/daping";
export default {
  name: "currentDayLive",
  data() {
    return {
      trainFives: [], trainSixs: [], trainSevens: [], trainEights: [],
      nightFiveLists: [], nightSixLists: [],
      nightSevenLists: [], nightEightLists: [],
      nightTrain1: [],
      nightTrain2: [], nightTrain3: [],
      nightTrain4: [],
      trainFiveLists: [],
      trainSixLists: [],
      trainSevenLists: [],
      trainEightLists: [],
      activeName: "1",
      tabsArr: [
        { name: "白班", val: "1" },
        { name: "夜班", val: "2" },
      ],
      dialogVisible: false,
      trainList: [],
      trainTwoList: [],
      trainThreeList: [],
      trainFourList: [],
      trainFiveList: [],
      trainSixList: [],
      trainSevenList: [],
      trainEightList: [],
      nightTrainList: [],
      nightTrainTwoList: [],
      nightTrainThreeList: [],
      nightTrainFourList: [],
      nightTrainFiveList: [],
      nightTrainSixList: [],
      nightTrainSevenList: [],
      nightTrainEightList: [],
      nowDate: moment().format("YYYY-MM-DD"),
      flags: false,
      timer: "",
      flags2: false,
      timer2: "",
      dayShiftDiaVis: false,
      isCarCode: "",
      id: "",
      activeCarName: `1`,
      tableData: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      complete: "",
      showNoneCar: false,
      nocarsDiaVis: false,
      activeNoCar: "1",
      querys: {
        carCode: null,
        type: 1,
        workPlanId: null,
        complete: null,
      },
    };
  },
  watch: {
    // 白班定时更新数据开关
    flags() {
      this.updateData();
    },
    // 夜班定时更新数据开关
    flags2() {
      this.updateNightData();
    },
  },
  created() {
    if (this.$route.path === "/currentDayLive_zx") {
      this.dialogVisible = true;
    }
    this.getScreenList();
    this.flags = !this.flags;
  },
  methods: {
    handleClick() {
      if (this.activeName === "1") {
        this.getScreenList();
        clearInterval(this.timer2);
        this.flags = !this.flags;
      }
      if (this.activeName === "2") {
        this.getScreenTwoList();
        clearInterval(this.timer);
        this.flags2 = !this.flags2;
      }
    },
    handleClose(done) {
      done();
      this.$router.go(-1);
    },
    handleTrainList(item, state) {
      if (item.carCode == "无车") {
        this.nocarsDiaVis = true;
        this.isCarCode = item.carCode;
        this.complete = state;
        this.id = item.id;
        this.listByCars4();
      } else {
        this.dayShiftDiaVis = true;
        this.querys.type = 1;
        this.activeCarName = "1";
        this.isCarCode = item.carCode;
        this.complete = state;
        this.id = item.id;
        this.listByCars();
      }
    },
    // 白班
    getScreenList() {
      // 检11 2列位
      let params = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 1, //股道id
        columns: 2, //列位
      };
      screenList(params).then((res) => {
        this.trainList = res.rows;
      });
      // 检12 2列位
      let params2 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 2, //股道id
        columns: 2, //列位
      };
      screenList(params2).then((res) => {
        this.trainTwoList = res.rows;
      });
      // 检13 2列位
      let params3 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 3, //股道id
        columns: 2, //列位
      };
      screenList(params3).then((res) => {
        this.trainThreeList = res.rows;
      });
      // 检14 2列位
      let params4 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 4, //股道id
        columns: 2, //列位
      };
      screenList(params4).then((res) => {
        this.trainFourList = res.rows;
      });


      // 检14 2列位
      let params5 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 5, //股道id
        columns: 2, //列位
      };
      screenList(params5).then((res) => {
        this.trainFiveLists = res.rows;
      });
      // 检14 2列位
      let params6 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 6, //股道id
        columns: 2, //列位
      };
      screenList(params6).then((res) => {
        this.trainSixLists = res.rows;
      });

      // 检14 2列位
      let params7 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 7, //股道id
        columns: 2, //列位
      };
      screenList(params7).then((res) => {
        this.trainSevenLists = res.rows;
      });
      // 检14 2列位
      let params8 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 8, //股道id
        columns: 2, //列位
      };
      screenList(params8).then((res) => {
        this.trainEightLists = res.rows;
      });



      // 检11 1列位
      let params9 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 1, //股道id
        columns: 1, //列位
      };
      screenList(params9).then((res) => {
        this.trainFiveList = res.rows;
      });
      // 检12 1列位
      let params10 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 2, //股道id
        columns: 1, //列位
      };
      screenList(params10).then((res) => {
        this.trainSixList = res.rows;
      });
      // 检13 1列位
      let params11 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 3, //股道id
        columns: 1, //列位
      };
      screenList(params11).then((res) => {
        this.trainSevenList = res.rows;
      });
      // 检14 1列位
      let params12 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 4, //股道id
        columns: 1, //列位
      };
      screenList(params12).then((res) => {
        this.trainEightList = res.rows;
      });


      // 检14 1列位
      let params13 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 5, //股道id
        columns: 1, //列位
      };
      screenList(params13).then((res) => {
        this.trainFives = res.rows;
      });
      // 检14 1列位
      let params14 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 6, //股道id
        columns: 1, //列位
      };
      screenList(params14).then((res) => {
        this.trainSixs = res.rows;
      });
      // 检14 1列位
      let params15 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 7, //股道id
        columns: 1, //列位
      };
      screenList(params15).then((res) => {
        this.trainSevens = res.rows;
      });
      // 检14 1列位
      let params16 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 8, //股道id
        columns: 1, //列位
      };
      screenList(params16).then((res) => {
        this.trainEights = res.rows;
      });
    },
    // 白班 更新数据
    updateData() {
      this.timer = setInterval(() => {
        this.getScreenList();
      }, 1000 * 30);
    },
    // 夜班
    getScreenTwoList() {
      // 检11 2列位
      let params = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 1, //股道id
        columns: 2, //列位
      };
      screenList(params).then((res) => {
        this.nightTrainList = res.rows;
      });
      // 检11 2列位
      let params2 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 2, //股道id
        columns: 2, //列位
      };
      screenList(params2).then((res) => {
        this.nightTrainTwoList = res.rows;
      });
      // 检11 2列位
      let params3 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 3, //股道id
        columns: 2, //列位
      };
      screenList(params3).then((res) => {
        this.nightTrainThreeList = res.rows;
      });
      // 检11 2列位
      let params4 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 4, //股道id
        columns: 2, //列位
      };
      screenList(params4).then((res) => {
        this.nightTrainFourList = res.rows;
      });

      // 检11 2列位
      let params5 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 4, //股道id
        columns: 2, //列位
      };
      screenList(params5).then((res) => {
        this.nightFiveLists = res.rows;
      });
      // 检11 2列位
      let params6 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 4, //股道id
        columns: 2, //列位
      };
      screenList(params6).then((res) => {
        this.nightSixLists = res.rows;
      });
      // 检11 2列位
      let params7 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 4, //股道id
        columns: 2, //列位
      };
      screenList(params7).then((res) => {
        this.nightSevenLists = res.rows;
      });
      // 检11 2列位
      let params8 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 4, //股道id
        columns: 2, //列位
      };
      screenList(params8).then((res) => {
        this.nightEightLists = res.rows;
      });


      // 检11 1列位
      let params9 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 1, //股道id
        columns: 1, //列位
      };
      screenList(params9).then((res) => {
        this.nightTrainFiveList = res.rows;
      });
      // 检12 1列位
      let params10 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 2, //股道id
        columns: 1, //列位
      };
      screenList(params10).then((res) => {
        this.nightTrainSixList = res.rows;
      });
      // 检13 1列位
      let params11 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 3, //股道id
        columns: 1, //列位
      };
      screenList(params11).then((res) => {
        this.nightTrainSevenList = res.rows;
      });
      // 检14 1列位
      let params12 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 4, //股道id
        columns: 1, //列位
      };
      screenList(params12).then((res) => {
        this.nightTrainEightList = res.rows;
      });


      // 检14 1列位
      let params13 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 5, //股道id
        columns: 1, //列位
      };
      screenList(params13).then((res) => {
        this.nightTrain1 = res.rows;
      });
      // 检14 1列位
      let params14 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 6, //股道id
        columns: 1, //列位
      };
      screenList(params14).then((res) => {
        this.nightTrain2 = res.rows;
      });
      // 检14 1列位
      let params15 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 7, //股道id
        columns: 1, //列位
      };
      screenList(params15).then((res) => {
        this.nightTrain3 = res.rows;
      });
      // 检14 1列位
      let params16 = {
        jobDate: this.nowDate, //日期
        shift: this.activeName, //班次
        trackId: 8, //股道id
        columns: 1, //列位
      };
      screenList(params16).then((res) => {
        this.nightTrain4 = res.rows;
      });
    },
    // 夜班 更新数据
    updateNightData() {
      this.timer2 = setInterval(() => {
        this.getScreenTwoList();
      }, 1000 * 30);
    },
    handleCarClick() {
      if (this.activeCarName === "1") {
        this.querys.type = 1;
      } else if (this.activeCarName === "2") {
        this.querys.type = 2;
      } else if (this.activeCarName === "3") {
        this.querys.type = 3;
      }
      this.listByCars();
    },
    handleNoCar() {
      if (this.activeNoCar === "1") {
        this.listByCars4();
      }
    },
    tableClass({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        //奇数行，序号不能被2整除
        return "even-row";
      } else if (rowIndex % 2 == 0) {
        return "o-row";
      } else {
        return "";
      }
    },
    listByCars() {
      this.querys.carCode = this.isCarCode;
      this.querys.workPlanId = this.id;
      this.querys.complete = this.complete;
      listByCars(this.querys).then((res) => {
        this.tableData = res.rows;
      });
    },
    // listByCars2() {
    //   const params = {
    //     carCode: this.isCarCode,
    //     type: this.activeCarName,
    //     workPlanId: this.id,
    //     complete: this.complete,
    //   };
    //   listByCars(params).then((res) => {
    //     this.tableData2 = res.rows;
    //   });
    // },
    // listByCars3() {
    //   const params = {
    //     carCode: this.isCarCode,
    //     type: this.activeCarName,
    //     workPlanId: this.id,
    //     complete: this.complete,
    //   };
    //   listByCars(params).then((res) => {
    //     this.tableData3 = res.rows;
    //   });
    // },
    listByCars4() {
      const params = {
        carCode: this.isCarCode,
        type: 4,
        workPlanId: this.id,
        complete: this.complete,
      };
      listByCars(params).then((res) => {
        this.tableData4 = res.rows;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  width: 100%;
  background: url("../../../assets/images/dapingbg1.jpg") 0 0 no-repeat;
  background-size: 100% 2550px;
  padding: 20px 10px;

  .day-shift {
    width: 100%;

    .day-shift-left,
    .day-shift-right {
      width: 53%;
      border: 1px solid #06647d;
      float: left;
      background: url("../../../assets/images/jianchabg.png") 0 0 no-repeat;
      background-size: 100% 28.5%;

      .num-wei {
        text-align: center;
        line-height: 0;
        font-size: 35px;
        font-weight: 600;
        color: #ffcc00;
        letter-spacing: 5px;
      }

      .top-box,
      .left-bg,
      .left-bg2 {
        width: 100%;
        height: 280px;
        overflow: hidden;
        // border: 1px solid #fff;
        margin-top: 10px;

        .left-title {
          width: 10%;
          height: 100%;
          text-align: center;
          line-height: 280px;
          font-size: 32px;
          font-weight: 600;
          color: #00ff6c;
          letter-spacing: 1px;
          float: left;
        }

        .train-box {
          width: 90%;
          height: 280px;
          float: left;
          cursor: pointer;

          .train-bg {
            width: 24%;
            height: 272.28px;
            background: url("../../../assets/images/trainbox.png") 0 20px no-repeat;
            background-size: 100% auto;
            float: left;
            margin: 5px 2.5px 0;

            .number-of-sets {
              text-align: center;
              color: #fff;
              font-size: 20px;
              line-height: 35px;
            }

            .istrainimg {
              width: 190px;
              margin-left: 5%;
            }

            .is-complete-img {
              margin-top: 15px;
              margin-left: 10%;
            }

            .trainNo {
              text-align: center;
              color: #fff;
              font-size: 20px;
            }

            .trainNoTwo {
              width: 100%;
              height: 23px;
              margin: 20px 0;
            }

            .train-time,
            .train-time2,
            .train-time3,
            .train-time4,
            .state-text {
              font-size: 20px;
              font-weight: bold;
              text-indent: 4em;
              letter-spacing: 2px;
              color: #003366;
            }

            .train-time2,
            .state-text2 {
              color: #00ccff;
            }

            .train-time3,
            .state-text3 {
              color: #f0ff00;
            }

            .train-time4,
            .state-text4 {
              color: #ff0000;
            }

            .state-text,
            .state-text2,
            .state-text3,
            .state-text4 {
              margin-left: 8px;
              font-weight: normal;
              font-size: 18px;
            }
          }
        }
      }

      .left-bg,
      .left-bg2 {
        width: 100%;
        height: 280px;
        background-color: #021243;
        margin-top: 11px;
      }

      .left-bg2 {
        margin-top: 11px;
      }

      .left-bg2:last-child {
        margin-bottom: 11px;
      }
    }

    .day-shift-right {
      width: 46.2%;
      float: right;

      .train-box {
        width: 100% !important;
        margin-left: 4px !important;

        .train-bg {
          width: 32.6%;
          height: 272.28px;
          margin: 5px 2px 0 !important;
        }
      }
    }
  }
}

::v-deep .nocar-box {
  width: 100%;
  height: 800px;
  overflow: auto;
  background-color: #024383 !important;
  background: url("../../../assets/images/dialogBg.png") 0 0 no-repeat;
  background-size: 100% 100%;

  .carNum {
    font-size: 30px;
    color: #fff;
    line-height: 68px;
    margin-left: 40px;
  }

  .el-tabs--card>.el-tabs__header {
    border: none;
    margin-top: 12px;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item {
    margin-left: 10px;
    border: none;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__nav {
    margin-left: 10px;
    border: none;
  }

  .el-tabs__content {
    padding: 0 24px;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item {
    width: 315px;
    height: 67px;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(1) {
    margin-left: 35px;
    background: url("../../../assets/images/wczy-1.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(1).is-active {
    margin-left: 35px;
    background: url("../../../assets/images/wczy.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border: none;
  }

  .el-table .el-table__header-wrapper th {
    background-color: #112154 !important;
    font-size: 28px !important;
    font-weight: normal !important;
    color: #00fffc !important;
  }

  .el-table__header {
    font-size: 28px;
    color: #00fffc;
  }

  .even-row {
    background-color: #002e72;
    color: #fff;
    font-size: 24px;
  }

  .o-row {
    background-color: #024383;
    color: #fff;
    font-size: 24px;
  }

  .el-table__header {
    background-color: #024383;
  }

  .el-table--medium .el-table__cell {
    padding: 18px 0;
  }

  .el-table__body tr:hover>td {
    background-color: transparent !important;
  }

  .el-table .el-table__header-wrapper {
    border: none;
  }

  .el-table__empty-block,
  .el-table::before {
    background-color: #024383;
  }
}

::v-deep .day-box {
  width: 100%;
  // height: 800px;
  overflow: auto;
  background: url("../../../assets/images/dialogBg.png") 0 0 no-repeat;
  background-size: 100% 100%;
  background-color: #024383 !important;

  .carNum {
    font-size: 30px;
    color: #fff;
    line-height: 68px;
    margin-left: 40px;
  }

  .el-tabs--card>.el-tabs__header {
    border: none;
    margin-top: 12px;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item {
    margin-left: 10px;
    border: none;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__nav {
    margin-left: 10px;
    border: none;
  }

  .el-tabs__content {
    padding: 0 24px;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item {
    width: 315px;
    height: 67px;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(1) {
    margin-left: 55px;
    background: url("../../../assets/images/gdyj-1.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(1).is-active {
    margin-left: 55px;
    background: url("../../../assets/images/gdyj.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2) {
    margin-left: 35px;
    background: url("../../../assets/images/ddzy-1.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2).is-active {
    margin-left: 35px;
    background: url("../../../assets/images/ddzy.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(3) {
    margin-left: 35px;
    background: url("../../../assets/images/gdjx-1.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(3).is-active {
    margin-left: 35px;
    background: url("../../../assets/images/gdjx.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  .el-table {
    width: 97.3% !important;
    // margin: auto;
    margin-left: 30px;
  }

  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border: none;
  }

  .el-table .el-table__header-wrapper th {
    background-color: #112154 !important;
    font-size: 28px !important;
    font-weight: normal !important;
    color: #00fffc !important;
  }

  .el-table__header {
    font-size: 28px;
    color: #00fffc;
  }

  .even-row {
    background-color: #002e72;
    color: #fff;
    font-size: 24px;
  }

  .o-row {
    background-color: #024383;
    color: #fff;
    font-size: 24px;
  }

  .el-table__header {
    background-color: #024383;
  }

  .el-table--medium .el-table__cell {
    padding: 18px 0;
  }

  .el-table__body tr:hover>td {
    background-color: transparent !important;
  }

  .el-table .el-table__header-wrapper {
    border: none;
  }

  .el-table__empty-block,
  .el-table::before {
    background-color: #024383;
  }
}

::v-deep .el-dialog {
  background-color: #04ddfe;
}

// ,.el-dialog__header, .el-dialog__body
::v-deep .el-dialog .el-dialog__body {
  padding: 0 !important;
  border: none;
}

::v-deep .el-dialog .el-dialog__header {
  padding: 0 !important;
  border: none;
}

::v-deep .el-dialog__headerbtn {
  background: url("../../../assets/images/close.png") 0 0 no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 999;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #031138;
}

::v-deep .el-dialog .el-dialog__header .el-dialog__headerbtn {
  width: 26px;
}
</style>
<style scoped>
.dateRange>>>.el-tabs--card>.el-tabs__header .el-tabs__nav {
  border: none;
  margin-top: 60px;
}

.dateRange>>>.el-tabs--card>.el-tabs__header .el-tabs__item {
  font-size: 16px;
  padding: 0 28px;
  height: 38px;
  letter-spacing: 2px;
  border-bottom: none;
  color: #3f4b73;
}

.dateRange>>>.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(1) {
  margin-left: 30px;
  background: url("../../../assets/images/leftTab2.png") 0 0 no-repeat;
  background-size: 100% 100%;
}

.dateRange>>>.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
  color: #fff;
}

.dateRange>>>.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(1).is-active {
  background: url("../../../assets/images/leftTab.png") 0 0 no-repeat;
  background-size: 100% 100%;
}

.dateRange>>>.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2) {
  margin-left: 5px;
  background: url("../../../assets/images/rightTab2.png") 0 0 no-repeat;
  background-size: 100% 100%;
  border-left: none;
}

.dateRange>>>.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2).is-active {
  background: url("../../../assets/images/rightTab.png") 0 0 no-repeat;
  background-size: 100% 100%;
}

.dateRange>>>.el-tabs--card>.el-tabs__header {
  border-bottom: none;
  margin-bottom: 0;
}

.currentDayLive>>>.el-dialog .el-dialog__body {
  padding: 0 !important;
}

.currentDayLive>>>.el-dialog__body {
  padding: 0 !important;
}

.currentDayLive>>>.el-dialog .el-dialog__header {
  padding: 0 !important;
}

.currentDayLive>>>.el-dialog:not(.is-fullscreen) {
  margin: 0 !important;
}
</style>
